﻿@model RightControl.Model.ArticleModel
@using RightControl.Model
@{
    ViewBag.Title = ViewBag.Site.SiteName + "-" + Model.Title;
}
@section css{
    <link rel="stylesheet" href="~/Content/css/blog.css" />
    <style>
        .blog-dz {
            width: 20px;
            height: 20px;
            position: absolute;
            bottom: -100px; /*初始红心生成的高度*/
            left: 50%;
            margin-left: -10px;
        }
    </style>
}
<div class="doc-container" id="doc-container">
    <div class="container-fixed">
        <div class="col-content" style="width:100%">
            <div class="inner">
                <article class="article-list">
                    <input type="hidden" value="@Model.ClassId" id="blogtypeid" />
                    <input type="hidden" id="articleId" value="@Model.Id">
                    <input type="hidden" id="openComment" value="true">
                    <input type="hidden" id="coverImage" value="@Model.ImgUrl">
                    <input type="hidden" id="description" value="@Model.ZhaiYao">
                    <section class="article-item">
                        <aside class="title" style="line-height:1.5;">
                            <h4>@Model.Title</h4>
                            <p class="fc-grey fs-14">
                                <small>
                                    作者：<a href="javascript:void(0)" target="_blank" class="fc-link">@ViewBag.Site.SiteName</a>
                                </small>
                                <small class="ml10">浏览次数：<i class="readcount">@Model.ReadNum</i></small>
                                <small class="ml10">更新于：<label>@Model.CreateOn</label> </small>
                                <small class="ml10">分类：<label>@Model.ClassName</label> </small>
                                <small class="ml10">类型：<label>@Model.TypeName</label> </small>
                            </p>
                        </aside>
                        <div class="time mt10" style="padding-bottom:0;">
                            <span class="day">@Model.CreateOn.ToString("dd")</span>
                            <span class="month fs-18">@Model.CreateOn.ToString("MM")<small class="fs-14">月</small></span>
                            <span class="year fs-18">@Model.CreateOn.ToString("yyyy")</span>
                        </div>
                        <div class="content artiledetail" style="border-bottom: 1px solid #e1e2e0; padding-bottom: 20px;">
                            @*@(new HtmlString(Model.Content))*@@*两种输出html的方法*@
                            @Html.Raw(Model.Content)
                            <div class="copyright mt20">
                                <p class="f-toe fc-black">
                                    非特殊说明，本文版权归 @ViewBag.Site.SiteName 所有，转载请注明出处.
                                </p>
                                <p class="f-toe">
                                    本文标题：
                                    <a href="javascript:void(0)" class="r-title">@Model.Title</a>
                                </p>
                                <p class="f-toe">
                                    本文网址：
                                    <a href="@ViewBag.Site.SiteDomain/Article/Detail/@Model.Id">@ViewBag.Site.SiteDomain/Article/Detail/@Model.Id</a>
                                </p>
                            </div>
                            <div id="aplayer" style="margin:5px 0"></div>
                            <h6>延伸阅读</h6>
                            <ol class="b-relation">
                                @foreach (ArticleModel item in ViewBag.OtherList)
                                {
                                    <li class="f-toe"><a href="/Article/Detail/@item.Id">@item.Title</a></li>
                                }
                            </ol>
                        </div>
                        <div class="bdsharebuttonbox share" data-tag="share_1">
                            <div id="demo"></div>
                            <ul onmousemove="shareThanks()">
                                <li class="f-praise" title="点赞,待开发"><span><a class="s-praise" style="width: 70%;height: 70%;"></a></span></li>
                                <li class="f-weinxi" title="微信分享"><a class="s-weinxi" data-cmd="weixin" style="width: 70%;height: 70%;"></a></li>
                                <li class="f-sina" title="key需要在新浪微博开放平台中申请,待开发"><a class="s-sina" data-cmd="tsina" style="width: 70%;height: 70%;"></a></li>
                                <li class="f-qq" title="QQ分享"><i class="fa fa-qq"></i></li>
                                <li class="f-qzone" title="QQ空间分享"><a class="s-qzone" data-cmd="qzone" style="width: 70%;height: 70%;"></a></li>
                            </ul>
                        </div>
                        <div class="f-cb"></div>
                        <div class="mt20 f-fwn fs-24 fc-grey comment" style="border-top: 1px solid #e1e2e0; padding-top: 20px;">
                        </div>
                        <fieldset class="layui-elem-field layui-field-title">
                            <legend>发表评论</legend>
                            <div class="layui-field-box">
                                <div class="leavemessage" style="text-align:initial">
                                    <form class="layui-form blog-editor" action="">
                                        <input type="hidden" name="articleid" id="articleid" value="@Model.Id">
                                        <div class="layui-form-item">
                                            <textarea name="editorContent" lay-verify="content" id="remarkEditor" placeholder="请输入内容" class="layui-textarea layui-hide"></textarea>
                                        </div>
                                        <div class="layui-form-item">
                                            @if (ViewBag.Site.OpenComment=="true")
                                            {
                                                <button class="layui-btn" lay-submit="formLeaveMessage" lay-filter="formLeaveMessage">提交留言</button>
                                            }
                                            else
                                            {
                                                <div style="text-align: center;">
                                                    <span>评论功能已被关闭了哟～</span>
                                                </div>
                                            }
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </fieldset>
                        <ul class="blog-comment" id="blog-comment" data-count="@ViewBag.Count" data-pagesize="@ViewBag.PageSize" data-pagecount="@ViewBag.PageCount" data-articleId="@Model.Id">
                            
                        </ul>
                    </section>
                </article>
            </div>
        </div>
    </div>
    <div id="qrcode" style="display:none;"></div>
</div>

@section js{
    <script src="~/Content/js/pagecomment.js"></script>
    <script src="~/Content/js/plugins/qrcode.min.js"></script>
    <script type="text/javascript">
        var $;
        layui.use(['jquery','layer'], function () {
            $ = layui.jquery,
            layer = layui.layer;
            var qrcode = new QRCode("qrcode", {
                text: location.href,
                width: 200,
                height: 200,
                colorDark: "#000000",
                colorLight: "#ffffff",
                correctLevel: QRCode.CorrectLevel.H
            });
            //QQ分享
            $(".f-qq").click(function () {
                var initUrl = "http://connect.qq.com/widget/shareqq/index.html?url=";
                //浏览器网址
                var browser = location.href;
                //文章标题
                var title = $(".r-title").text();
                //分享图片地址
                var coverImage = "https://qiqing-1256225409.cos-website.ap-guangzhou.myqcloud.com/image/" + $("#coverImage").val();
                //描述
                var description = $("#description").val();
                initUrl = initUrl + browser + "&sharesource=qzone&title=" + title + "&pics=" + coverImage + "&summary=" + description + "&desc=" + description;
                window.open(initUrl);
                //http://connect.qq.com/widget/shareqq/index.html?url=你的分享网址&sharesource=qzone&title=你的分享标题&pics=你的分享图片地址&summary=你的分享描述&desc=你的分享简述
            });
            //QQ空间分享,本地测试链接为localhost会出现标题和内容undefined
            $(".f-qzone").click(function () {
                var initUrl = "https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=";
                //浏览器网址
                var browser = location.href;
                //文章标题
                var title = $(".r-title").text();
                //分享图片地址
                var coverImage = "https://qiqing-1256225409.cos-website.ap-guangzhou.myqcloud.com/image/" + $("#coverImage").val();
                //描述
                var description = $("#description").val();
                initUrl = initUrl + browser + "?sharesource=qzone&title=" + title + "&pics=" + coverImage + "&summary=" + description;
                console.log(initUrl);
                window.open(initUrl);
                //https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=http://zixuephp.net/article-309.html?sharesource=qzone&title=一键分享到QQ空间、QQ好友、新浪微博、微信代码&pics=http://zixuephp.net/uploads/image/20170810/1502335815192079.png&summary=通过各自平台的开发接口，进行参数指定，进行一键分享javascript代码功能
            });
            //新浪微博
            /*$(".f-qzone").click(function () {
                var initUrl = "https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=";
                //浏览器网址
                var browser = location.href;
                //文章标题
                var title = $(".r-title").text();
                //分享图片地址
                var coverImage = "https://qiqing-1256225409.cos-website.ap-guangzhou.myqcloud.com/image/"+$("#coverImage").val();
                //描述
                var description = $("#description").val();
                initUrl=initUrl+browser+"&sharesource=qzone&title="+title+"&pics="+coverImage+"&summary="+description;
                window.open(initUrl);
                //http://service.weibo.com/share/share.php?url=你的分享网址&sharesource=weibo&title=你的分享标题&pic=你的分享图片&appkey=你的key，需要在新浪微博开放平台中申请
            });*/
            //微信分享
            $(".f-weinxi").click(function () {
                //浏览器网址
                var browser = location.href;
                layer.open({
                    type: 1,
                    title: false,
                    area: ['200px', '200px'],
                    shadeClose: true,
                    closeBtn: 2,
                    content: $('#qrcode')
                });
            });
        });
        //分享区域感谢特效
        function shareThanks() {
            var x = 100;
            var y = 900;
            var num = Math.floor(Math.random() * 3 + 1);
            var index = $('#demo').children('img').length;
            var rand = parseInt(Math.random() * (x - y + 1) + y);
            $("#demo").append("<img class='blog-dz' src=''>");
            $('.blog-dz:eq(' + index + ')').attr('src', '/Content/image/dianzan/' + num + '.png')
            $(".blog-dz").animate({
                bottom: "800px",
                opacity: "0",
                left: rand,
            }, 3000)
        }
    </script>
}
